import React from 'react';
import TodoItem from '../todo'
import './index.css'

class TodoList extends React.Component {

    render() {
        const {onDeleteTodo, onToggleTodo, onChangeTodo} = this.props;
        return (
            <ul className="todo-list">
                {this.props.todos.map((todo, index) => (
                    <li key={index}>
                        <TodoItem todo={todo}
                                  onDeleteTodo={onDeleteTodo}
                                  onToggleTodo={onToggleTodo}
                                  onChangeTodo={onChangeTodo}/>
                    </li>
                ))}
            </ul>
        )
    }
}

export default TodoList